<template>
  <div class="settle-in-main">
    <!--顶部的banner区域-->
    <honexun-header>
      <honexun-header-right></honexun-header-right>
    </honexun-header>
    <div class="settle-in-banner">
      <div class="settle-in-banner-background"></div>
      <div class="settle-in-banner-title-contain">
        <div class="settle-in-banner-title"></div>
      </div>
      <div class="settle-in-banner-options">
        <div v-for="(item, i) in optionsList"
             :class="item.className"
             :key="'bannerOptionsList' + i"
             @click="optionsTab(item.value)">
          <img :src="item.img"
               alt="">
          <span>{{item.label}}</span>
          <div class="jiant"> <span></span></div>
        </div>
      </div>
    </div>
    <!--中间导航部分-->
    <div class="settle-in-nav">
      <div class="settle-in-nav-inline">
        <div :class="{'each-nav': true, 'is-active': nowValue === item.value }"
             v-for="(item, i) in navList"
             :key="'settleInNavList' + i">
          <div class="each-nav-label"
               @click="routerChange(item.value)">{{item.label}}</div>
          <div class="each-nav-active"></div>
        </div>
      </div>
    </div>
    <!--各子路由界面-->
    <!--<keep-alive>-->
      <!--<router-view />-->
    <!--</keep-alive>-->
    <supplier v-show="nowValue === 3"></supplier>
    <four-shop v-show="nowValue === 2"></four-shop>
    <service-network v-show="nowValue === 1"></service-network>

    <div class="navr">
      <div class="navr-box">
        <div class="navr-li">
          <h4>活动</h4>
          <div></div>
          <!--<span><i></i>从技术到品质“神车”CR-V的保值秘诀</span>-->
          <!--<span><i></i>博泽跨出历史性的一步</span>-->
        </div>
        <div class="navr-li">
          <h4>公告</h4>
          <div></div>
          <!--<span><i></i>从技术到品质“神车”CR-V的保值秘诀</span>-->
          <!--<span><i></i>博泽跨出历史性的一步</span>-->
        </div>
        <div class="navr-li">
          <h4>新手入门</h4>
          <div></div>
          <!--<span><i></i>从技术到品质“神车”CR-V的保值秘诀</span>-->
          <!--<span><i></i>博泽跨出历史性的一步</span>-->
        </div>
      </div>
    </div>

    <honexun-footer-a class="footers"></honexun-footer-a>
    <honexun-footer-b class="footers"></honexun-footer-b>
  </div>
</template>

<script>
import honexunHeader from '@/layout/header_D';

import honexunHeaderRight from '@/layout/header_right_B';
import honexunFooterA from '@/layout/footer_A';
import honexunFooterB from '@/layout/footer_B';

import supplier from './supplier'
import fourShop from './4sShop'
import serviceNetwork from './serviceNetwork'

export default {
  components: {
    honexunHeader,
    honexunHeaderRight,
    supplier,
    fourShop,
    serviceNetwork,
    honexunFooterA,
    honexunFooterB
  },
  data () {
    return {
      nowValue: 3,
      rightPath: [
        '/settleIn/preSettleIn/'
      ],
      showArea: 1,
      optionsList: [
        {
          label: '供应商入驻',
          value: 3,
          img: require('../../../assets/image/settleIn/test3.png'),
          className: 'options-button btn-1'
        },
        {
          label: '4S入驻',
          value: 2,
          img: require('../../../assets/image/settleIn/test1.png'),
          className: 'options-button btn-2'
        },
        {
          label: '服务网点入驻',
          value: 1,
          img: require('../../../assets/image/settleIn/test2.png'),
          className: 'options-button btn-3'
        },
      ],
      // tipsList: [
      //   {
      //     title: '活动',
      //     icon: require('@/assets/image/settleIn/icon-1.png'),
      //     list: [
      //       {
      //         value: '从技术到品质“神车”CR-V的保值秘诀'
      //       },
      //       {
      //         value: '博泽跨出历史性的一步'
      //       }
      //     ]
      //   },
      //   {
      //     title: '公告',
      //     icon: require('@/assets/image/settleIn/icon-2.png'),
      //     list: [
      //       {
      //         value: '蜂巢能源上海车展发布10分钟快充黑科技'
      //       },
      //       {
      //         value: '李雪琴这次折服于北京汽车'
      //       }
      //     ]
      //   },
      //   {
      //     title: '新手入门',
      //     icon: require('@/assets/image/settleIn/icon-3.png'),
      //     list: [
      //       {
      //         value: '蜂巢能源上海车展发布10分钟快充黑科技'
      //       },
      //       {
      //         value: '博泽跨出历史性的一步'
      //       }
      //     ]
      //   }
      // ],
      navList: [
        {
          url: '/settleIn/preSettleIn/supplier',
          label: '入驻供应商',
          value: 3
        },
        {
          url: '/settleIn/preSettleIn/4sShop',
          label: '入驻4S店',
          value: 2
        },
        {
          url: '/settleIn/preSettleIn/serviceNetwork',
          label: '入驻服务网点',
          value: 1
        }
      ]
    }
  },
  mounted () {

  },
  watch: {

  },
  methods: {
    // 操作按钮点击事件
    optionsTab (val) {
      console.log(val);
      switch (val) {
        case 3:
          this.$router.push('/settleIn/seeSettleIn/supplier');
          break;
        case 2:
          this.$router.push('/settleIn/seeSettleIn/4sShop');
          break;
        case 1:
          this.$router.push('/settleIn/seeSettleIn/2sShop');
          break;
      }
    },
    // 子路由切换
    routerChange (value) {
      this.nowValue = value;
    }
  },
  computed: {
    path () {
      return this.$route.path;
    }
  }
}
</script>

<style lang="less" scoped>
  .settle-in-main {
    position: relative;
  }

.honexun-header {
  position: absolute;
  z-index: 999;
}

.honexun-header .honexun-header-main .honexun-header-hotLine .icon {
  background: url("../../../assets/image/settleIn/phones.png") center center
    no-repeat !important;
  background-size: 100%;
}

.settle-in-banner {
  width: 100%;
  height: 660px;
  position: relative;

  .settle-in-banner-title-contain {
    width: 1280px;
    position: relative;
    height: 660px;
    margin: 0 auto;
  }

  .settle-in-banner-options {
    width: 1280px;
    height: 78px;
    .flexWrap(center, space-between);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 30px;
    .options-button {
      width: 416px;
      height: 78px;
      opacity: 1;
      font-size: 24px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      color: #fff;
      box-shadow: 0px -2px 31px 0px rgba(12, 20, 64, 0.26);
      backdrop-filter: blur(9px);
      line-height: 78px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      cursor: pointer;
      .userUnSelect();
      background: #16367d;
      opacity: 0.95;
      transition: all 0.3s;
      img {
        display: inline-block;
        width: 28px;
        height: 28px;
        opacity: 1;
        transition: all 0.3s;
      }
      span {
        padding-left: 21px;
      }
      .jiant {
        display: inline-block;
        width: 0;
        height: 40px;
        margin-left: 21px;
        position: relative;
        transition: all 0.3s;
        opacity: 0;
        span {
          width: 99px;
          height: 40px;
          background: url("../../../assets/image/settleIn/anniu.png") center
            center no-repeat;
          background-size: 100%;
          position: absolute;
          left: 0;
          top: 13px;
          border-radius: 20px;
          box-shadow: 0px 2px 18px 0px rgba(121, 136, 152, 0.17);
        }
      }
    }
    .btn-1:hover {
      background: #ed4b4b;
      img {
        opacity: 0;
        width: 0;
      }
      .jiant {
        width: 99px;
        opacity: 1;
      }
    }
    .btn-2:hover {
      background: #ed4b4b;
      img {
        opacity: 0;
        width: 0;
      }
      .jiant {
        width: 99px;
        opacity: 1;
      }
    }
    .btn-3:hover {
      background: #ed4b4b;
      img {
        opacity: 0;
        width: 0;
      }
      .jiant {
        width: 99px;
        opacity: 1;
      }
    }

    .btn-2 {
      margin: 0 16px;
    }
  }
}
.settle-in-nav {
  text-align: center;
}
@media screen and (min-width: 1366px) {
  .settle-in-banner-background {
    width: calc(100%);
    height: 660px;
    background: url("../../../assets/image/settleIn/banners.png") center center
      no-repeat;
    position: absolute;
    top: 0;
    bottom: 0;
  }
  .settle-in-banner-title {
    width: 520px;
    height: 252px;
    position: absolute;
    left: 0;
    top: 220px;
    background: url("../../../assets/image/settleIn/text.png") center center
      no-repeat;
    background-size: 100%;
  }
  .settle-in-nav {
    height: 60px;
    width: 1280px;
    text-align: center;
    margin: 0 auto 72px;
    padding-top: 117px;
  }
  .navr {
    .navr-box {
      width: 1280px;
      overflow: hidden;
      margin: 0 auto;
    }
    .navr-li {
      width: 426px;
      float: left;
    }
  }
}
@media screen and (max-width: 1366px) {
  .settle-in-banner {
    height: 520px;
    .settle-in-banner-background {
      width: 100%;
      height: 520px;
      background: url("../../../assets/image/settleIn/banners-1.png") center
        center no-repeat;
      position: absolute;
      top: 0;
      left: 0;
    }
    .settle-in-banner-title {
      width: 400px;
      height: 194px;
      position: absolute;
      left: 0;
      top: 208px;
      background: url("../../../assets/image/settleIn/text.png") center center
        no-repeat;
      background-size: 100%;
    }
    .settle-in-banner-options {
      height: 70px;
      bottom: 20px;
      .options-button {
        width: 386px;
        height: 70px;
        line-height: 70px;
      }
    }
  }
  .settle-in-nav {
    margin: 0 auto;
    padding-top: 80px;
  }
  .navr {
    .navr-box {
      width: 1280px;
      overflow: hidden;
      margin: 0 auto;
    }
    .navr-li {
      width: 426px;
      float: left;
    }
  }
}
.navr {
  background-color: #fff;
  padding-top: 74px;
  padding-bottom: 100px;
  overflow: hidden;
  .navr-li {
    padding-left: 40px;
    h4 {
      font-size: 24px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: @colorCommonFont;
    }
    > div {
      width: 35px;
      height: 5px;
      background: #d8d8d8;
      margin-top: 29px;
      margin: 29px 0 10px;
    }
    span {
      color: @colorGreyFont;
      display: block;
      margin-top: 30px;
      font-size: 16px;
      line-height: 16px;
      cursor: pointer;
      i {
        margin-right: 10px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        display: inline-block;
        background-color: #d8d8d8;
      }
    }
    span:hover {
      color: @activeRed;
      i {
        background-color: @activeRed;
      }
    }
  }
}
.settle-in-nav {
  .settle-in-nav-inline {
    .flex(center, center);
    .each-nav {
      display: inline-block;
      height: 60px;
      margin-right: 60px;
      font-size: 24px;
      line-height: 1;
      color: @colorGreyFont;

      &:nth-last-child(1) {
        margin-right: 0;
      }
      .each-nav-label {
        .userUnSelect();
        .flex(flex-end, center);
        cursor: pointer;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        height: 36px;
      }
      .each-nav-active {
        width: 68px;
        height: 4px;
        background: @activeRed;
        margin: 18px auto 0;
        display: none;
        border-radius: 2px;
      }

      &.is-active {
        font-size: 36px;
        color: @colorCommonFont;

        .each-nav-active {
          display: block;
        }
      }
    }
  }
}
.footers {
  background: #2e3550;
}
</style>
